<template>
	<div class="add-assets">
		<div class="overlay">
			<div class="overlay-content scrolling">
				<header>
					<div class="align-items row-space-around">
						<van-icon name="arrow-left" slot="left" size="16" color="#343434" :style="{paddingLeft:'14px'}" @click="$router.go(-1)" />
						<van-search placeholder="输入ToKen名称或合约地址" v-model="searchValue" @focus="$router.push({path:'/Search'})" class="search" />
					</div>
					<div>
						<van-cell-group>
							<van-cell title="首页资产管理" is-link to="Homepageassets" class="con" :border="false" />
							<van-cell title="我的所有资产" is-link to="Myproperty" class="con" />
						</van-cell-group>
					</div>
				</header>
				<section>
					<div>
						<h4 class="title">热门资产</h4>
						<van-cell-group class="cell" :border="false">
							<van-cell :title="el.tokenName" :label="el.contract.substr(0,8) + '....' + el.contract.substr(el.contract.length - 8,8)" class="cell align-items" v-for="(el,i) in assetsList" :key="i">
								<div slot="icon">
									<img :src="el.logoUrl" width="29px" />
								</div>
								<van-icon :name="el.add ?'passed':'add-o'" size="20" :color="el.add ? '#ccc':'#0b8ee6'" @click="addd(el,i)" v-show="!el.show" />
								<van-loading color="#1989fa" size="20" v-show="el.show" />
							</van-cell>
						</van-cell-group>
					</div>
				</section>
			</div>
		</div>
	</div>
</template>

<script>
	import { assets } from '../../utils/api.js'

	export default {
		data() {
			return {
				clicked: false,
				assetsList: [],
			};
		},
		components: {},
		mounted() {
			this.getList();
		},
		methods: {
			addd(el, i) {
				if(el.add) {
					return false;
				}
				this.$nextTick(function() {
					Vue.set(el, 'show', true);
					el.add ? Vue.set(el, 'add', false) : Vue.set(el, 'add', true);
				});
				assets.getAddToken({
					address: localStorage.address,
					tokenId: el.tokenId
				}).then(res => {
					if(res.code == 200) {
						Vue.set(el, 'show', true);
						this.getList();
						this.$toast({
							position: 'top'
						}, '已添加到首页资产管理')
					}
				})
			},
			getList() {
				assets.getPopularAssets({
					address: localStorage.address
				}).then(res => {
					if(res.code == 200) {
						this.assetsList = res.data;
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.add-assets {
		background: #f2f4f5;
		header {
			background: #fff;
			.search {
				width: 340px;
			}
			margin-bottom: 20px;
		}
		section {
			padding: 25px 0 0 25px;
			box-sizing: border-box;
			background: #fff;
			.title {
				font-size: 14px;
			}
		}
	}
	
	.cell {
		padding-bottom: 20px;
	}
	
	.con {
		padding-left: 22px;
	}
	
	.cell img {
		vertical-align: text-top;
		margin-right: 10px;
	}
	
	.van-cell {
		border-bottom: 1px solid #f5f6f7;
	}
	
	.van-search__content {
		border-radius: 5px;
	}
	
	.van-cell__value {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	
	.van-cell__label {
		margin-top: 0px;
		color: #969799;
		font-size: 12px;
		line-height: 12px;
	}
	
	.van-cell:not(:last-child)::after {
		border: 0;
	}
</style>